<template>
  <div id="listTable">
    <el-button
      type="success"
      icon="el-icon-s-promotion"
      size="mini"
      @click="copyfacebook(scope.row)"
    >复制至Facebook公共主页</el-button>
    <el-button
      type="success"
      icon="el-icon-s-promotion"
      size="mini"
      @click="copyfacebookgerenzhuye(scope.row)"
    >复制至Facebook个人主页</el-button>
    <!-- 发布至第几个公共主页 -->
    <el-dialog title="提示" :visible.sync="openAssembleVisible789" :before-close="handleClose" width="30%">
      <div>一次只能发布到1个Facebook公共主页。</div>
      <div style="margin-top: 10px">请选择你要发布的Facebook公共主页：</div>
      <el-radio-group v-model="ggzhuyedizhi" style="margin-top: 20px">
        <el-radio v-for="(item,index) in gongongzhuyeid" :label=item.index :key="index">{{item.name}}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="quedingggzhuye" :loading="fabuflag">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script>
  window.fbAsyncInit = function() {
    // 上面和这里就相当于跟Facebook建立链接一样，这里建立了链接才能发送Facebook
    // 注意：这里建立链接的前提条件是需要你的电脑能访问外网
    FB.init({
      appId            : 'xxxxxxxxxx',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v18.0'
    });
  };
</script>
<script>
export default {
  data() {
    return {
      ggzhuyedizhi:0,
      // 只是一个样式的标识
      fabuflag:false,
      openAssembleVisible789:false,
      // 公共主页初始数据（随便写的）
      gongongzhuyeid:[{
        name:'原神启动',
        index:0
      },{
        name:'王者荣耀',
        index:1
      },{
        name:'和平精英',
        index:2
      }],
      zhuyedshuju:{},
      item:{},
      imglist:[],
    };
  },
  methods: {
    // 关闭对话框时的操作
    handleClose(){
      // 使按钮上的样式不生效
      this.fabuflag=false
      // 关闭对话框
      this.openAssembleVisible789=false
    },
    // 发送到个人主页
    copyfacebookgerenzhuye(data){
      let imgcover = data.cover // 封面
      let title = data.name // 标题
      let description = data.brief // 简介描述
      let goodsid = data.id // 商品的ID,后面可用来进行拼接地址来访问商品详情信息
      // share_goods_html这个接口具体功能为将我传入的值传到后端，然后让后端通过这些值返回我一个静态的HTML页面，这样facebook就能抓取
      // 到我的图谱信息，而这个HTML页面的js代码就执行跳转到商品详情页即可
      share_goods_html({
        image:imgcover,
        title:title,
        goods_id:goodsid,
        url:"https://www.xxxxx.com/detail/"+goodsid,
        description:description,
      }).then((res)=>{
        // 返回静态页面成功，就将这个静态页面的链接放入至Facebook接口中，Facebook就能读取到图谱元素了
        function popupwindow(url) {
          return window.open(
            "http://www.facebook.com/sharer.php?u=" +
              encodeURIComponent(url),
            "_blank",
            "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
          );
        }
        popupwindow(res.data);
      })
    },
    quedingggzhuye(){
      let that= this
      // 点击确定后fabuflag为true，确认按钮上转圈圈的样式开启
      that.fabuflag=true
      // ggzhuyedizhi为你选择的公共主页的地址即下标，分别赋值
      let zhuyeid = that.zhuyedshuju[that.ggzhuyedizhi].id
      let zhuyetoken = that.zhuyedshuju[that.ggzhuyedizhi].access_token
      // 初始化上传后图片的ID列表，由于我找到的Facebook上传图片只能一张一张传，所以将每一次上传成功返回的ID存进列表中
      let imgidlist=[]
      // item为你选择的要发布到Facebook上的商品的详细数据
      let item = that.item
      // imglist为你选择的要发布到Facebook上的商品的图片加上封面
      let imglist=that.imglist
      // b为计数器
      let b=0
      // flag为定时器的标识
      let flag=false
      for(let i=0;i<imglist.length&&b<5;i++){
        FB.api('/'+zhuyeid+'/photos','POST',{
          access_token:zhuyetoken,
          url:imglist[i].image,
          published:false // 这个字段一定不能少
        },function(response){
          // 成功一次计数加一
          b++
          if(response.id){
            imgidlist.push({'media_fbid':response.id})//media_fbid字段也一定不能少
          }
          if(b==imglist.length){
            // flag为true就去发帖
            flag=true
          }
          if(b==5){
            // 我要求最多上传5张
            flag=true
          }
        })
      }
      var a = setInterval(() => {
        if(flag){
          // 发帖
            FB.api('/'+zhuyeid+'/feed','POST',{
            access_token:zhuyetoken, //访问令牌
            message:item.brief  //帖子文本
            attached_media: imgidlist,//已经初始上传过的图片ID列表，格式{'media_fbid':id}这样才可以
          },function(response){
            if(response.error){
              if(response.error.code==368){
                that.fabuflag=false
                that.openAssembleVisible789=false
                that.$message({
                  message: "你短时间内发送了太多帖子,请稍后再试",
                  type: "error"
                });
              }
              console.log(response.error.message)
            }else{
              that.fabuflag=false
              that.openAssembleVisible789=false
              that.$message({
                message: "已成功发布至Facebook公共主页",
                type: "success"
              });
            }
            clearInterval(a)
          })
        }
      }, 500);
    },
    copyfacebook(data){
      let that = this
      FB.getLoginStatus(function(response) {
        // 获取facebook登录状态
        if (response.status === 'connected') {
          // 登录成功就会有accessToken
          var id =0
          var accessToken = response.authResponse.accessToken;
          FB.api('/me', function(response) {
            id=response.id
            // 获取自己的个人ID
            FB.api('/'+id+'/accounts','GET',{
              access_token:accessToken
            },function(response){
              // 获取授权的公共主页的id
              if(response.data==null){
                that.$message({
                  message: '您的公共主页未开通或权限未开通,请开通后再尝试',
                  type: "error"
                });
                return
              }
              if(response.data.length>0){
                // 初始化公共主页ID列表
                that.gongongzhuyeid=[]
                // 公共主页数据
                that.zhuyedshuju=response.data
                // 初始化要上传的图片列表
                that.imgidlist=[]
                // 将商品数据赋值给item
                that.item = data
                // 将商品图片赋值给图片列表
                that.imglist=that.item.images
                // 将商品封面图片加入到图片列表中
                that.imglist.unshift({'image':that.item.cover})
                console.log(that.imglist,99999999)
                // 将授权的公共主页导入到公共主页选项对话框中，
                // 这一步是你要选择你要发布到哪一个公共主页
                for(let j=0;j<response.data.length;j++){
                  that.gongongzhuyeid.push({'name':response.data[j].name,'index':j})
                }
                that.openAssembleVisible789=true
              }
            })
          });
        }else{
          // 没登录成功就让他登录
          FB.login(function(response) {
            var id =0
            if (response.authResponse) {
              FB.api('/me', function(response) {
                id=response.id
                // 获取我的个人ID
                FB.getLoginStatus(function(response) {
                  if (response.status === 'connected') {
                    var accessToken = response.authResponse.accessToken;
                    // 获取我的公共主页的ID ，这里的公共主页ID，你授权了多少就有多少
                    FB.api('/'+id+'/accounts','GET',{
                      access_token:accessToken
                    },function(response){
                      if(response.data==null){
                        that.$message({
                          message: '您的公共主页未开通或权限未开通,请开通后再尝试',
                          type: "error"
                        });
                        return
                      }
                      if(response.data.length>0){
                        // 初始化公共主页ID列表
                        that.gongongzhuyeid=[]
                        // 公共主页数据
                        that.zhuyedshuju=response.data
                        // 初始化要上传的图片列表
                        that.imgidlist=[]
                        // 将商品数据赋值给item
                        that.item = data
                        // 将商品图片赋值给图片列表
                        that.imglist=that.item.images
                        // 将商品封面图片加入到图片列表中
                        that.imglist.unshift({'image':that.item.cover})
                        console.log(that.imglist,99999999)
                        // 将授权的公共主页导入到公共主页选项对话框中，
                        // 这一步是你要选择你要发布到哪一个公共主页
                        for(let j=0;j<response.data.length;j++){
                          that.gongongzhuyeid.push({'name':response.data[j].name,'index':j})
                        }
                        that.openAssembleVisible789=true
                      }
                    })
                  } 
                });
              });
            } else {
              that.$message({
                message: "授权登录失败",
                type: "error"
              });
            }
          },{scope: 'public_profile,email,pages_show_list,pages_read_engagement,pages_manage_posts'});//登录时要获取的权限，很重要
        } 
      });
    },
  }
};
</script>
